<template>
  <section class="mt-24 pb-24 pt-16 bg-gradient-to-b from-white to-[#F4F4F4]">
    <div class="w-250 mx-auto">
      <div class="text-center text-[#5F5F5F] text-8 tracking-normal leading-14 font-bold mb-8">
        Trusted by Innovative Companies
      </div>
      <div class="w-250 relative">
        <swiper-container
          :slides-per-view="5"
          :slides-per-group="3"
          :space-between="20"
          :loop="true"
          :navigation="navigation"
          :pagination="pagination"
          :autoplay="{
            delay: 5000
          }"
          class="w-94%"
        >
          <swiper-slide
            v-for="(image, index) in imagePaths"
            :key="index"
            class="h-14 flex justify-center items-center"
          >
            <figure>
              <img class="object-center object-cover" :src="image.path" :alt="image.name" />
            </figure>
          </swiper-slide>
        </swiper-container>

        <!-- 自定义分页器容器（可选） -->
        <div class="my-pagination"></div>

        <!-- 自定义导航按钮（可选） -->
        <div class="my-button-prev">
          <svg
            t="1734517217785"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2929"
            width="25"
            height="25"
          >
            <path
              d="M424.5248 512l313.344-309.7088a58.0352 58.0352 0 0 0 0-82.752 59.6864 59.6864 0 0 0-83.7248 0l-355.2 351.0912a58.0352 58.0352 0 0 0 0 82.7392l355.2 351.104a59.6864 59.6864 0 0 0 83.712 0 58.0352 58.0352 0 0 0 0-82.7648L424.512 512z"
              fill="#AAAAAA"
              p-id="2930"
            ></path>
          </svg>
        </div>
        <div class="my-button-next">
          <svg
            t="1734517228232"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3095"
            width="25"
            height="25"
          >
            <path
              d="M612.2752 512l-313.344 309.7088a58.0352 58.0352 0 0 0 0 82.752 59.6864 59.6864 0 0 0 83.7248 0l355.2-351.0912a58.0352 58.0352 0 0 0 0-82.7392l-355.2-351.104a59.6864 59.6864 0 0 0-83.712 0 58.0352 58.0352 0 0 0 0 82.7648L612.288 512z"
              fill="#AAAAAA"
              p-id="3096"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
const images = import.meta.glob('/src/images/home/Companies-1-*.webp', { eager: true });

const imagePaths = Object.entries(images).map(([key, value]) => ({
  path: value.default || value, // 对应导入的图片路径
  name: key.split('/').pop(),  // 提取文件名
}));

const pagination = {
  el: '.my-pagination',
  bulletClass: 'my-bullet',
  bulletActiveClass: 'my-bullet-active',
  clickable: true,
  renderBullet: function (index, className) {
    return `<span class="my-bullet"></span>`
  }
}

const navigation = {
  enabled: true,
  prevEl: '.my-button-prev',
  nextEl: '.my-button-next'
}
</script>

<style scoped>
:deep(.my-pagination) {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

:deep(.my-bullet) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #000000;
  opacity: 0.2;
}

:deep(.my-bullet:hover) {
  cursor: pointer;
}

:deep(.my-bullet-active) {
  opacity: 1;
}

:deep(.my-button-prev) {
  position: absolute;
  top: calc(50% - 25px);
  left: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
}

:deep(.my-button-next) {
  position: absolute;
  top: calc(50% - 25px);
  right: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
}
</style>
